<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素属性</title>
</head>
<body>

    <div id="box" hello="world">我是一个div标签</div>

    <script src="./jquery.js"></script>
    <script>
       /*
       操作元素属性
       1.attr()
         =>可以进行设置和获取元素的属性
         =>注意：一般用于操作元素的自定义属性
         =>注意：attr操作的所有属性都会直接出现在元素的标签上
         =>获取
           ->语法：元素：attr（你要获取的属性名）
           ->返回值：该属性名对应的属性值
         =>设置：
           ->语法：元素.attr(属性名，属性值)

        2.removeAttr()
         =>对元素的属性进行删除操作
         =>语法：元素集合.removeAttr(你要删除的属性名)
       */

       //1-1.attr()获取
    //    console.log($('div').attr('hello'))
    //    console.log($('div').attr('id'))

    //    //1-2.attr()设置
    //    $('div').attr('a',100)//添加了a的自定义属性
    //    $('div').attr('id','container')//box变为container

    //    //1-3.removeAttr()
    //    $('div').removeAttr('hello')
    //    $('div').removeAttr('id')

        /*
        1.prop()
          +可以获取和设置元素的属性
          +注意：
            =>当prop设置元素原生属性，会直接响应在元素标签上
            =>当prop设置元素自定义属性，不会直接响应在元素标签上，会相应在元素对象身上
          +注意：prop方法不能获取元素标签身上的自定义属性，只能获取到prop方法自己设置的自定义属性
          +prop()设置
            =>语法：元素集合.prop（属性名，属性值）
          +prop()获取
            =>语法：元素集合.prop（你要获取的属性名）
            =>返回值：该属性对应的值

         2.removeProp()
           +用来删除元素属性的方法
           +注意： 
             =>不能删除原生属性
             =>只能删除由prop方法设置的自定义属性
           +语法：元素集合.removeProp（你要删除的属性名）
        */
    
        // 1-1.prop()设置
        // $('div').prop('id','container')
        // $('div').prop('a',100)
        // console.log($('div'))

        // //1-2.prop()获取
        // console.log($('div').prop('id'))
        // console.log($('div').prop('hello'))//结果undefined
        // console.log($('div').prop('a'))

        //1-3.removeProp()
        // $('div').removeProp('id')//不能删
        // $('div').removeProp('a')
        // console.log($('div'))

    </script>
</body>
</html>